﻿<!DOCTYPE html>
<html  manifest="../../default.appcache">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <title>
        </title>
        <style type="text/css">
            div.CoordinatesOutput {
               font-size:14px;
               color:#0094ff;
               font-weight:100;
               height:40px;
            }
        </style>
        <link rel="stylesheet" href="../../css/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" href="../../css/Default.css" />
        <script type="text/javascript" src="../../js/CoordinateConverter/Geo.CoordinateConverter.js">
        </script>
        <script type="text/javascript" src="../../js/Geo.Core.js">
        </script>
        <script type="text/javascript" src="../../js/jquery-1.7.2.min.js">
        </script>
        <script type="text/javascript" src="../../js/jquery.mobile-1.2.0.min.js">
        </script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQwcewX7bh20XbaoPF69ezdowXOfJknLg&sensor=true">
        </script>
        <script type="text/javascript" src="../../js/Geo.UI.js">
        </script>
        <script type="text/javascript" src="../../js/p/trackable/Location.js">
        </script>
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="page1">
            <div data-theme="b" data-role="header">
                <h3>
                    Geotrackable
                </h3>
            </div>
            <div data-role="content">
                <h3>
                    What Location?
                </h3>
                <div class="Coordinates" id="Coordinates" data-role="fieldcontain">
                <input name="Coordinates" id="txtCoordinates" placeholder="" value="" type="text">
            </div>
            <div data-role="fieldcontain">
                <select name="LocationTypeSwitch" id="LocationTypeSwitch" data-theme="b" data-role="slider">
                    <option value="off">
                        Manual
                    </option>
                    <option value="on">
                        Auto
                    </option>
                </select>
            </div>
            <div style="background-color:black;width:100%;">
                <div style="display:inline-block;width:100%;max-width:380px;border:1px solid black;background-color:black;color:#eee;padding:10px;">
                    <div>GPS Latitude and Longitude</div>
                    <div id="lblGps" class="CoordinatesOutput">
                        <span style="color:red;">Loading...</span>
                    </div>
                    <div>Degrees Minutes Seconds</div>
                    <div id="lblDms" class="CoordinatesOutput">
                        <span style="color:red;">Loading...</span>
                    </div>
                    <div>Decimal Degrees</div>
                    <div id="lblDecimalDegrees" class="CoordinatesOutput">
                        <span style="color:red;">Loading...</span>
                    </div>
                </div>
                <div id="map-container" style="display:none;width:100%;max-width:400px;height:300px;border:1px solid black;">
                    <div id="map-canvas" style="width:100%;max-width:400px;height:300px;"></div>
                </div>
            </div>
                <a data-role="button" id="btnNext"  data-theme="b" href="#page1">
                    Next
                </a>
                <a data-role="button" id="btnBack"  href="#page1" data-icon="arrow-l" data-iconpos="left">
                    Back
                </a>
                <div style=" text-align:center">
                    <img style="width: 200px; height: 200px" src="../../images/GeotrackableSealV1.gif" />
                </div>
            </div>
            <div data-theme="b" data-role="footer">
                <h3>
                    <span id="lblStatus"></span>
                </h3>
            </div>
        </div>
    </body>
</html>
